<template>

    <ul class="goodsDisplay" 
        v-infinite-scroll="load" 
        infinite-scroll-distance="1">
        <li 
            v-for="good in goodsForShow"
            :key="good.goodsId"
        >
            <SingleGoodsCard 
                :coverImages="good.coverImages"
                :priceDay="good.priceDay"
                :priceMonth="good.priceMonth"
                :title="good.title"
                @click="goGoodsDetail(good)">
            </SingleGoodsCard >
        </li>
        <el-empty  
            class="empty" 
            v-show="isEmpty" 
            :image-size="240" 
            description="您搜索的商品不见了" />
        <div 
            class="loading" 
            v-show="isLoading" 
            v-loading="isLoading"
            element-loading-background="#f2f2f2">
        </div>
    </ul>
        
</template> 
    
<script setup >
    import SingleGoodsCard from '@/components/goods/SingleGoodsCard.vue';
    import { reactive,computed,ref,onMounted} from 'vue';
    import {useStore} from 'vuex';
    import { useRouter } from 'vue-router';
    import { ElMessage, ElMessageBox } from 'element-plus'

    //api
    import {GoodsRequester} from '@/api/api.js'
    const GoodsRqster = new GoodsRequester();
    
    const store =useStore();
    const router = useRouter();


    let keyword = computed(()=>store.state.goods.searchKeyWord)
    let isLoading = ref(false);
    let isEmpty = computed(()=>{
        return goodsForShow.value.length==0?true:false;
    });
    //商品列表
    var goodsList = computed(()=>{
        return store.state.goods.goodsList;
    })

    //用于展示的商品列表
    var goodsForShow = computed(()=>{
        if (store.state.goods.searchKeyWord == '')
            return goodsList.value['recommend'];
        else {
            return store.state.goods.searchGoodsList
        };
        
    })

    function goGoodsDetail(good){
        router.push({
            name:'goodsDetail',
            params:{
                goodsId:good.goodsId,
                userId:good.userId,
            }
        })
    }


    function load(){
        console.log('loading');
        if (!isEmpty.value){
            isLoading.value = true;
            console.log('加载更多图片!');
            GoodsRqster.reqGoodsList(keyword.value,10).then(res=>{
                console.log('加载完毕');
                console.log(goodsForShow.value);
                res.data.forEach(good => {
                    goodsForShow.value.push(good);
                });
                isLoading.value = false;

            }).catch(err=>{
                open();
            })
        }
    
    }





    //弹出错误
    const open = () => {
    ElMessageBox.alert('获取商品列表出错', 'Warning', {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: 'OK',
        callback: (action) => {
            ElMessage({
                type: 'info',
                message: `action: ${action}`,
            })
        },
    })
    }

</script>
    
<style lang="scss" scoped>
    .goodsDisplay{
        height: 7.26rem;
        overflow: scroll;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        transition: none;
        >li{
            width: 1.8rem;
            margin-bottom: 0.2rem;
        }
        /* 奇数选择器 */
        li:nth-child(odd){
            margin-right:0.2rem ;
        }

        .loading{
            width: 100%;
            height: 0.5rem;
        }

        .empty{
            margin-bottom: 20%;
        }
    }
</style>